<template>
  <div>
    <el-card style="margin: 20px;">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">教育培训</a></el-breadcrumb-item>
        <el-breadcrumb-item>XX县第一中学</el-breadcrumb-item>
        <el-breadcrumb-item>重点区域巡查</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    
    <el-card style="margin: 20px;">
      <div class="operation-bar">
        <el-button type="primary" @click="handleAdd">新增记录</el-button>
      </div>
    </el-card>


  <div class="container">
    <!-- 左侧表格 -->
    <div class="left-table">
      <el-table
        :data="leftTableData"
        style="width: 100%"
        @row-click="handleRowClick"
        highlight-current-row
        border>
        <el-table-column
          prop="name"
          label="场所名称"
          width="200">
        </el-table-column>
      </el-table>
    </div>

    <!-- 右侧表格 -->
    <div class="right-table">
 
      <el-table
        :data="rightTableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
        style="width: 100%"
        border>
        <el-table-column
          prop="date"
          label="检查日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="inspector"
          label="检查人"
          width="120">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="120">
        </el-table-column>
        <el-table-column
          prop="description"
          label="检查描述">
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="rightTableData.length">
        </el-pagination>
      </div>
    </div>
  </div></div>
</template>

<script>
export default {
  data() {
    return {
      leftTableData: [
        { name: '消防控制室' },
        { name: '消防水泵房' },
        { name: '配电室' },
        { name: '化学实验室' },
        { name: '学生宿舍' },
        { name: '厨房' }
      ],
      rightTableData: [],
      currentPage: 1,
      pageSize: 10,
      currentLocation: ''
    }
  },
  methods: {
    handleRowClick(row) {
      this.currentLocation = row.name;
      // 模拟获取对应场所的检查记录
      this.rightTableData = Array.from({ length: 23 }, (_, index) => ({
        date: `2024-${Math.floor(Math.random() * 12) + 1}-${Math.floor(Math.random() * 28) + 1}`,
        inspector: '检查员' + (index % 3 + 1),
        status: ['正常', '异常', '待处理'][Math.floor(Math.random() * 3)],
        description: `${row.name}例行安全检查记录${index + 1}`,
      }))
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleAdd() {
      // 处理新增记录
      console.log('新增记录');
    },
    handleEdit(row) {
      console.log('编辑', row);
    },
    handleDelete(row) {
      console.log('删除', row);
    }
  },
  created() {
    // 默认选中第一个场所
    if (this.leftTableData.length > 0) {
      this.handleRowClick(this.leftTableData[0]);
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  padding: 20px;
  gap: 20px;
}

.left-table {
  flex: 0 0 250px;
}

.right-table {
  flex: 1;
}

/* .operation-bar {
  margin-bottom: 20px;
} */

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>